<template>
  <div class='vb-radio-wrapper'>
    <label
      class="vb-radio"
      @click="handClick"
    >
      <span class="vb-radio-input">
        <span
          class="vb-radio-inner"
          :class="{'vb-radio-clicked':isChecked}"
        ></span>
        <input
          :name="name"
          type="radio"
          class="vb-radio-original"
        >
      </span>
      <span
        class="vb-radio-label"
        :style="{color:(isChecked?'#409eff':'#606266')}"
      >
        <slot></slot>
      </span>
    </label>

  </div>
</template>
<script>
import Input from "./Input.vue";
export default {
  name: "vbRadio",
  components: { Input },
  inject: {
    radioGroup: { default: "" },
  },
  props: {
    name: {
      type: String,
      default: "",
    },
    value: {
      type: String,
      default: "",
    },
    label: {
      type: [String, Number, Boolean],
      default: "",
    },
  },
  data() {
    return {};
  },
  computed: {
    //是否存在radioGroup
    isRadioGp() {
      return !!this.radioGroup;
    },
    isChecked() {
      //判断radio类型
      if (this.radioGroup) {
        return this.label == this.radioGroup.value;
      } else {
        return this.label === this.value;
      }
    },
  },
  methods: {
    handClick() {
      //发生点击事件后就把this.label发送给 父组件的radio,这样通过更新radio，
      //通过props传到子组件，触发子组件的computed，从而改变vb-radio-clicked
      if (this.isRadioGp) {
        this.radioGroup.$emit("input", this.label);
      } else {
        this.$emit("input", this.label);
      }
    },
  },
};
</script>
<style lang='scss' scoped>
@import "@/assets/css/Radio.scss";
</style>